<template>
  <el-pagination
          background
          v-model:currentPage="queryListData.page"
          :page-sizes="[10, 25, 50, 100]"
          :page-size="queryListData.pagesize"
          layout="prev, pager, next, sizes, total"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
  >
  </el-pagination>
</template>

<script>
  import {toRef} from "vue";

  export default {
    name: "TablePagination",
    props: {
      queryList: {
        type: Object,
        default() {
          return {
            page: 1,
            pagesize: 10,
            keyword: ''
          }
        }
      },
      total: {
        type: Number,
        default: 0
      }
    },
    emits: ['pagination'],
    setup(props, context) {
      const queryListData = toRef(props, 'queryList')

      const handleSizeChange = (val) => {
        queryListData.value.pagesize = val
        context.emit('pagination', queryListData.value)
      }
      const handleCurrentChange = (val) => {
        queryListData.value.page = val
        context.emit('pagination', queryListData.value)
      }
      return {
        queryListData,
        handleSizeChange,
        handleCurrentChange
      }
    }
  }
</script>

<style scoped>

</style>
